<template>
  <div class="communication-form" style="width: 800px;">
    <!--S表单-->
    <el-form
      ref="settingForm"
      class="setting-form"
      :rules="formDataRules"
      :model="formData"
      label-position="left"
      label-width="120px"
    >
      <el-form-item label="商户号" prop="wechat_mch_account">
        <el-input v-model="formData.wechat_mch_account" placeholder="商户号" />
      </el-form-item>
      <el-form-item label="商户密钥" prop="wechat_mch_key">
        <el-input v-model="formData.wechat_mch_key" placeholder="商户密钥">
          <div slot="append" class="copy-button"><el-button type="success" size="mini" class="clip" :data-clipboard-text="formData.wechat_mch_key">复制</el-button></div>
          <div slot="prepend" class="auto-create" @click="createRandomKey">自动生成</div>
        </el-input>
      </el-form-item>
      <el-form-item label="商户证书cert">
        <el-upload
          :action="upload.url"
          :headers="upload.headers"
          :multiple="true"
          :show-file-list="false"
          :limit="2"
          :on-success="uploadWxCertSuccess"
          :on-error="uploadWxCertError"
        >
          <el-button size="mini" type="success">点击上传</el-button>
          <div slot="tip">
            <el-link :type="!setting.wechat_cert ? 'danger' : 'success'" :underline="false">
              apiclient_cert.pem{{ !setting.wechat_cert ? '未上传' : '已上传' }}
            </el-link>
            &nbsp;&nbsp;
            <el-link :type="!setting.wechat_key ? 'danger' : 'success'" :underline="false">
              apiclient_key.pem{{ !setting.wechat_key ? '未上传' : '已上传' }}
            </el-link>
          </div>
        </el-upload>
      </el-form-item>
      <el-button type="primary" size="small" @click="submit">确认配置</el-button>
    </el-form>
    <!--E表单-->
  </div>
</template>

<script>
import randomstring from 'randomstring'
import { uploadParams } from '@/utils/url'
import Clipboard from 'clipboard'
export default {
  name: 'CommunicationForm',
  props: {
    setting: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      formData: {
        wechat_mch_account: '',
        wechat_mch_key: ''
      },
      formDataRules: {
        wechat_mch_account: [
          { required: true, message: '请输入商户号', trigger: 'blur' }
        ],
        wechat_mch_key: [
          { required: true, message: '请输入商户密钥', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    // 上传组件所需参数
    upload() {
      return {
        ...uploadParams('setting/uploadWxPayCert')
      }
    }
  },
  watch: {
    setting() {
      const { wechat_mch_account, wechat_mch_key } = this.setting
      this.formData = {
        wechat_mch_account,
        wechat_mch_key
      }
    }
  },
  mounted() {
    new Clipboard('.clip')
  },
  methods: {
    createRandomKey() {
      this.formData.wechat_mch_key = randomstring.generate(32)
    },
    uploadWxCertSuccess() {
      this.$emit('reset')
    },
    uploadWxCertError(a) {
      const error_message = JSON.parse(a.message)
      this.$message({
        message: error_message.message,
        type: 'error'
      })
    },
    /**
     * 提交
     */
    submit() {
      this.$refs.settingForm.validate((valid) => {
        if (valid) {
          const { wechat_mch_account, wechat_mch_key } = this.formData
          this.$put('setting/pay', {
            wechat_mch_account,
            wechat_mch_key
          })
            .then(() => {
              this.$message.success({
                message: '修改成功',
                type: 'success'
              })
            })
            .catch((error) => {
              this.$handleError(error)
            })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .copy-button{
    cursor: pointer;
    display: block;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    user-select: none;
  }
  .auto-create{
    cursor: pointer;
    display: block;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    user-select: none;
  }
</style>
